<template>
  <li :style="{backgroundImage:`url(${url})`}">
    <div class="file-layer">
      <span class="file-name" v-text="name"></span>
      <span class="del-file" @click.stop="$emit('drop')"></span>
    </div>
  </li>
</template>

<script>
import upload from "./upload";

function readFile(file) {
  return new Promise(resolve => {
    const reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.readAsDataURL(file);
  });
}

export default {
  props: {
    file: [Object, String],
    name: String,
    index: Number,
    remote:String,
  },
  data() {
    return {
      url: ""
    };
  },
  mounted() {
    if (typeof this.file === "string") {
      this.url = this.file;
    } else {
      readFile(this.file).then(r => {
        this.url = r;
      });

      upload({
        url:this.remote,
        file: this.file
      }).then(res => {
        this.$emit("complete", {
          index: this.index,
          data: res
        });
      });
    }
  }
};
</script>

<style>
</style>
